package com.songxian.wechatcompose.ui

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.songxian.wechatcompose.R
import com.songxian.wechatcompose.WeViewModel
import com.songxian.wechatcompose.extension.unread
import com.songxian.wechatcompose.ui.theme.WeTheme
import com.songxian.wechatcompose.ui.theme.red1
import dev.chrisbanes.accompanist.insets.navigationBarsPadding
import dev.chrisbanes.accompanist.insets.statusBarsHeight
import dev.chrisbanes.accompanist.insets.statusBarsPadding

/**
 * Created by Administrator on 2021/4/20 0020.
 * Describe:
 */

@Composable
fun WeTopBar(title: String, onBack: (() -> Unit)? = null) {
    val viewModel: WeViewModel = viewModel()
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(WeTheme.colors.background)
            .statusBarsPadding()
    ) {
        Row(
            Modifier
                .height(48.dp)
        ) {
            if (onBack != null) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_back),
                    contentDescription = null,
                    Modifier
                        .clickable { onBack() }
                        .align(Alignment.CenterVertically)
                        .size(36.dp)
                        .padding(8.dp)
                )
            }

            Spacer(modifier = Modifier.weight(1f))

            Icon(
                painter = painterResource(id = R.drawable.ic_palette), contentDescription = null,
                Modifier
                    .align(Alignment.CenterVertically)
                    .clickable {
                        viewModel.theme = when (viewModel.theme) {
                            WeTheme.Theme.Light -> WeTheme.Theme.Dark
                            WeTheme.Theme.Dark -> WeTheme.Theme.NewYear
                            WeTheme.Theme.NewYear -> WeTheme.Theme.Light
                        }
                    }
                    .size(36.dp)
                    .padding(8.dp)

            )
        }

        Text(
            text = title,
            modifier = Modifier
                .align(Alignment.Center),
            color = WeTheme.colors.textPrimary,
            textAlign = TextAlign.Center
        )
    }


}

@Composable
fun WeBottomBar(
    modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit
) {
    Row(
        modifier
            .fillMaxWidth()
            .background(WeTheme.colors.bottomBar)
            .navigationBarsPadding(),
        content = content
    )
}

@Composable
fun AvatarList(@DrawableRes iconId: Int, showDot: Boolean = false) {
    Image(
        painter = painterResource(iconId),
        contentDescription = "avatar",
        Modifier
            .padding(12.dp, 8.dp, 8.dp, 8.dp)
            .size(48.dp)
            .clip(RoundedCornerShape(4.dp))
            .unread(showDot, WeTheme.colors.badge)

    )
}

@Preview
@Composable
fun PreviewWeTopBar() {
    WeTopBar(title = "微信")
}